<!--
 * @Author       : 梁嘉琳
 * @Date         : 2022-05-27 11:11:29
 * @LastEditors  : 梁嘉琳
 * @LastEditTime : 2022-07-13 14:11:43
 * @FilePath     : \web3d\my\examples\rotaryGeometry.html
-->
<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>旋转立方体-BoxGeometry</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<link rel="icon" href="../favicon.ico" />
		<link type="text/css" rel="stylesheet" href="../public/main.css" />
	</head>
	<body>
		<canvas id="fireflx"></canvas>
		<!-- <div id="fireflx"></div> -->

		<script type="importmap">
			{
				"imports": {
					"three": "../node_modules/three/build/three.module.js",
					"three/": "../node_modules/three/",
					"public/": "../public/"
				}
			}
		</script>

		<script type="module">
			import * as THREE from 'three';
			import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
			import { resizeRendererToDisplaySize } from 'public/resizeHandle.js';

			const canvas = document.querySelector('#fireflx');
			let camera, scene, renderer;

			scene = new THREE.Scene();
			camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

			renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
			camera.aspect = renderer.domElement.clientWidth / renderer.domElement.clientHeight;
			camera.updateProjectionMatrix();


			// renderer.setSize(window.innerWidth, window.innerHeight);
			// canvas.appendChild(renderer.domElement);

			const geometry = new THREE.BoxGeometry();
			const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
			const cube = new THREE.Mesh(geometry, material);
			scene.add(cube);

			camera.position.z = 5;
			const controls = new OrbitControls(camera, renderer.domElement);
			// window.addEventListener('resize', resize);
			// function resize() {
			// 	if (resizeRendererToDisplaySize(renderer)) {
			// 		const canvas = renderer.domElement;
			// 		camera.aspect = canvas.clientWidth / canvas.clientHeight;
			// 		camera.updateProjectionMatrix();
			// 	}
			// }
			function animate() {
				if (resizeRendererToDisplaySize(renderer)) {
					const canvas = renderer.domElement;
					camera.aspect = canvas.clientWidth / canvas.clientHeight;
					camera.updateProjectionMatrix();
				}
				// rotation旋转
				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;
				renderer.render(scene, camera);
				requestAnimationFrame(animate);
			}
			animate();
		</script>
	</body>
</html>
